<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>软件授权验证</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .container {
            background: white;
            border-radius: 15px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            max-width: 500px;
            width: 100%;
            padding: 40px;
        }

        .logo {
            text-align: center;
            font-size: 48px;
            margin-bottom: 20px;
        }

        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 10px;
            font-size: 24px;
        }

        .subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 30px;
            font-size: 14px;
        }

        .machine-id-box {
            background: #f8f9fa;
            border: 2px dashed #dee2e6;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 25px;
            text-align: center;
        }

        .machine-id-label {
            color: #666;
            font-size: 12px;
            margin-bottom: 8px;
        }

        .machine-id {
            font-family: 'Courier New', monospace;
            font-size: 18px;
            font-weight: bold;
            color: #2c3e50;
            letter-spacing: 1px;
        }

        .copy-btn {
            background: #6c757d;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 5px;
            font-size: 12px;
            cursor: pointer;
            margin-top: 10px;
            transition: all 0.3s;
        }

        .copy-btn:hover {
            background: #5a6268;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: 500;
        }

        textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            font-family: 'Courier New', monospace;
            resize: vertical;
            min-height: 120px;
            transition: all 0.3s;
        }

        textarea:focus {
            outline: none;
            border-color: #2c3e50;
            box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
        }

        .btn {
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
            color: white;
            border: none;
            padding: 14px 30px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(44, 62, 80, 0.3);
        }

        .btn:disabled {
            background: #95a5a6;
            cursor: not-allowed;
            transform: none;
        }

        .result-box {
            margin-top: 25px;
            padding: 20px;
            border-radius: 8px;
            display: none;
            animation: fadeIn 0.5s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .result-box.show {
            display: block;
        }

        .result-success {
            background: #d4edda;
            border: 2px solid #28a745;
            color: #155724;
        }

        .result-error {
            background: #f8d7da;
            border: 2px solid #dc3545;
            color: #721c24;
        }

        .result-warning {
            background: #fff3cd;
            border: 2px solid #ffc107;
            color: #856404;
        }

        .result-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .result-icon {
            font-size: 24px;
            margin-right: 10px;
        }

        .info-grid {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 8px;
            margin-top: 15px;
        }

        .info-label {
            font-weight: 600;
        }

        .info-value {
            font-weight: normal;
        }

        .progress-bar {
            width: 100%;
            height: 4px;
            background: #e0e0e0;
            border-radius: 2px;
            overflow: hidden;
            margin-top: 20px;
            display: none;
        }

        .progress-bar.active {
            display: block;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #2c3e50, #34495e);
            animation: progress 1.5s ease-in-out;
        }

        @keyframes progress {
            from { width: 0%; }
            to { width: 100%; }
        }

        .help-text {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }

        .footer {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e0e0e0;
            color: #999;
            font-size: 12px;
        }

        .launch-btn {
            background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
            margin-top: 15px;
        }

        .launch-btn:hover {
            box-shadow: 0 10px 20px rgba(46, 204, 113, 0.3);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="logo">🔒</div>
        <h1>软件授权验证</h1>
        <p class="subtitle">请输入您的授权码以激活软件 <span style="opacity: 0.7; font-style: italic;">by Chaxi</span></p>

        <div class="machine-id-box">
            <div class="machine-id-label">您的机器ID</div>
            <div class="machine-id" id="machine-id">正在获取...</div>
            <button class="copy-btn" onclick="copyMachineId()">复制机器ID</button>
            <div class="help-text">请将此ID发送给管理员获取授权码</div>
        </div>

        <form id="auth-form">
            <div class="form-group">
                <label for="license-key">授权码</label>
                <textarea id="license-key" name="licenseKey" required 
                          placeholder="请粘贴您收到的授权码"></textarea>
                <div class="help-text">授权码由管理员提供，通常是一串较长的字符</div>
            </div>

            <button type="submit" class="btn" id="verify-btn">验证授权</button>
        </form>

        <div class="progress-bar" id="progress">
            <div class="progress-fill"></div>
        </div>

        <div id="result" class="result-box">
            <!-- 验证结果将显示在这里 -->
        </div>

        <div class="footer">
            <p>© 2024 License Guard v2.0 | 安全授权系统</p>
        </div>
    </div>

    <script>
        // 生成机器ID（实际应该从系统获取）
        function generateMachineId() {
            // 使用浏览器指纹生成唯一ID
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            ctx.textBaseline = 'top';
            ctx.font = '14px Arial';
            ctx.fillText('fingerprint', 2, 2);
            const dataURL = canvas.toDataURL();
            
            // 结合其他浏览器信息
            const fingerprint = [
                navigator.userAgent,
                navigator.language,
                screen.width + 'x' + screen.height,
                screen.colorDepth,
                new Date().getTimezoneOffset(),
                dataURL
            ].join('|');
            
            // 生成哈希
            let hash = 0;
            for (let i = 0; i < fingerprint.length; i++) {
                const char = fingerprint.charCodeAt(i);
                hash = ((hash << 5) - hash) + char;
                hash = hash & hash;
            }
            
            // 转换为16进制
            return Math.abs(hash).toString(16).padStart(16, '0');
        }

        // 页面加载时显示机器ID
        window.onload = function() {
            const machineId = generateMachineId();
            document.getElementById('machine-id').textContent = machineId;
            
            // 检查是否已有保存的授权
            const savedLicense = localStorage.getItem('savedLicense');
            if (savedLicense) {
                document.getElementById('license-key').value = savedLicense;
            }
        };

        // 复制机器ID
        function copyMachineId() {
            const machineId = document.getElementById('machine-id').textContent;
            navigator.clipboard.writeText(machineId).then(() => {
                const btn = event.target;
                const originalText = btn.textContent;
                btn.textContent = '已复制！';
                setTimeout(() => {
                    btn.textContent = originalText;
                }, 2000);
            });
        }

        // 验证授权
        document.getElementById('auth-form').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const licenseKey = document.getElementById('license-key').value.trim();
            const machineId = document.getElementById('machine-id').textContent;
            const verifyBtn = document.getElementById('verify-btn');
            const progressBar = document.getElementById('progress');
            const resultDiv = document.getElementById('result');
            
            // 显示进度条
            verifyBtn.disabled = true;
            verifyBtn.textContent = '验证中...';
            progressBar.classList.add('active');
            resultDiv.classList.remove('show');
            
            // 模拟验证过程
            setTimeout(() => {
                progressBar.classList.remove('active');
                verifyBtn.disabled = false;
                verifyBtn.textContent = '验证授权';
                
                // 模拟验证结果（实际应该调用后端API）
                const isValid = licenseKey.length > 50 && Math.random() > 0.3;
                
                if (isValid) {
                    // 保存授权码
                    localStorage.setItem('savedLicense', licenseKey);
                    
                    // 显示成功结果
                    resultDiv.className = 'result-box result-success show';
                    resultDiv.innerHTML = `
                        <div class="result-title">
                            <span class="result-icon">✅</span>
                            授权验证成功！
                        </div>
                        <div class="info-grid">
                            <span class="info-label">授权类型:</span>
                            <span class="info-value">标准版</span>
                            
                            <span class="info-label">有效期至:</span>
                            <span class="info-value">2025-08-07</span>
                            
                            <span class="info-label">剩余天数:</span>
                            <span class="info-value">365天</span>
                            
                            <span class="info-label">授权功能:</span>
                            <span class="info-value">全部功能</span>
                        </div>
                        <button class="btn launch-btn" onclick="launchProgram()">
                            启动程序
                        </button>
                    `;
                } else {
                    // 显示错误结果
                    resultDiv.className = 'result-box result-error show';
                    resultDiv.innerHTML = `
                        <div class="result-title">
                            <span class="result-icon">❌</span>
                            授权验证失败
                        </div>
                        <p>授权码无效或不适用于此设备。</p>
                        <p style="margin-top: 10px;">可能的原因：</p>
                        <ul style="margin-left: 20px; margin-top: 5px;">
                            <li>授权码输入错误</li>
                            <li>授权码已过期</li>
                            <li>授权码不适用于此机器</li>
                            <li>授权码已被撤销</li>
                        </ul>
                        <p style="margin-top: 15px;">
                            请联系管理员获取有效的授权码。
                        </p>
                    `;
                }
            }, 1500);
        });

        // 启动程序
        function launchProgram() {
            alert('程序启动成功！\n\n（这是演示，实际会启动被保护的程序）');
            
            // 实际应该：
            // 1. 调用后端API验证授权
            // 2. 获取程序启动令牌
            // 3. 使用令牌启动受保护的程序
        }

        // 定期检查授权状态
        setInterval(() => {
            const savedLicense = localStorage.getItem('savedLicense');
            if (savedLicense) {
                // 静默验证授权状态
                console.log('检查授权状态...');
            }
        }, 60000); // 每分钟检查一次
    </script>
</body>
</html>
